import React from 'react';
import {Form, Row, Col, Input, Select, Button, Icon, InputNumber, DatePicker, TreeSelect} from 'antd';
import styles from './ProjectFilter.less';

const FormItem = Form.Item;
const {Option} = Select;

@Form.create({
  mapPropsToFields(props) {
    if (!props.query) {
      return {};
    }

    return {
      cid: Form.createFormField({value: props.query.cid}),
      no: Form.createFormField({value: props.query.no}),
      name: Form.createFormField({value: props.query.name}),
      status: Form.createFormField({value: props.query.status}),
    };
  },
})
export default class ProjectFilter extends React.PureComponent {

  constructor(props) {
    super(props);

    this.state = {
      expandForm: false,
    };
  }

  handleSubmit = () => {
    const {onFilterChange, form: {validateFieldsAndScroll}} = this.props;
    validateFieldsAndScroll((errors, values) => {
      if (errors) return;
      onFilterChange(values);
    });
  };

  resetForm = () => {
    const {form} = this.props;
    form.resetFields();
    this.handleSubmit();
  };

  toggleForm = () => {
    this.setState({
      expandForm: !this.state.expandForm,
    });
  };

  renderSimpleForm() {
    const {form: {getFieldDecorator}, list} = this.props;
    const catList = list.map(item => ({
      id: item.id,
      pId: item.pid,
      value: item.id.toString(),
      title: item.name,
    }));
    const tProps = {
      treeData: catList,
      placeholder: '请选择',
    };

    return (
      <Form onSubmit={this.handleSubmit} layout="inline">
        <Row gutter={{md: 8, lg: 24, xl: 48}}>
          <Col md={6} sm={24}>
            <FormItem label="项目分类">
              {getFieldDecorator('cid')(
                <TreeSelect
                  allowClear
                  treeDefaultExpandAll
                  treeDataSimpleMode
                  dropdownStyle={{maxHeight: 200, overflow: 'auto'}}
                  {...tProps}
                />
              )}
            </FormItem>
          </Col>
          <Col md={6} sm={24}>
            <FormItem label="项目名称">
              {getFieldDecorator('name')(
                <Input placeholder="请输入"/>
              )}
            </FormItem>
          </Col>
          <Col md={6} sm={24}>
            <FormItem label="项目编号">
              {getFieldDecorator('no')(
                <Input placeholder="请输入"/>
              )}
            </FormItem>
          </Col>
          <Col md={6} sm={24}>
            <FormItem>
              <Button type="primary" onClick={this.handleSubmit}>查询</Button>
              <Button className={styles.ML8} onClick={this.resetForm}>重置</Button>
              {/*<a className={styles.ML8} onClick={this.toggleForm}>
                展开 <Icon type="down"/>
              </a>*/}
            </FormItem>
          </Col>
        </Row>
      </Form>
    );
  }

  renderAdvancedForm() {
    const {form: {getFieldDecorator}} = this.props;
    const formItemLayout = {
      labelCol: {
        xs: {span: 24},
        sm: {span: 8},
      },
      wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
      },
    };

    return (
      <Form
        onSubmit={this.handleSubmit}
        layout="inline"
      >
        <Row gutter={{md: 8, lg: 24, xl: 48}}>
          <Col md={8} sm={24}>
            <FormItem
              {...formItemLayout}
              label="项目名称"
            >
              {getFieldDecorator('name')(
                <Input placeholder="请输入"/>
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem
              {...formItemLayout}
              label="项目编号"
            >
              {getFieldDecorator('no')(
                <Input placeholder="请输入"/>
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem
              {...formItemLayout}
              label="调用次数"
            >
              {getFieldDecorator('number')(
                <InputNumber style={{width: '100%'}}/>
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem
              {...formItemLayout}
              label="注册时间"
            >
              {getFieldDecorator('date')(
                <DatePicker placeholder="请输入更新日期" style={{width: '100%'}}/>
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem
              {...formItemLayout}
              label="项目状态"
            >
              {getFieldDecorator('status')(
                <Select
                  allowClear
                  placeholder="请选择"
                >
                  <Option value="0">未审核</Option>
                  <Option value="1">通过</Option>
                  <Option value="2">未通过</Option>
                  <Option value="3">审核中</Option>
                </Select>
              )}
            </FormItem>
          </Col>
          <Col md={8} sm={24}>
            <FormItem
              {...formItemLayout}
              label="项目状态"
            >
              {getFieldDecorator('status4')(
                <Select
                  allowClear
                  placeholder="请选择"
                >
                  <Option value="0">关闭</Option>
                  <Option value="1">运行中</Option>
                </Select>
              )}
            </FormItem>
          </Col>
        </Row>
        <div style={{overflow: 'hidden'}}>
					<span style={{float: 'right', marginBottom: 24}}>
						<Button type="primary" htmlType="submit">查询</Button>
						<Button className={styles.ML8} onClick={this.resetForm}>重置</Button>
						<a className={styles.ML8} onClick={this.toggleForm}>
							收起 <Icon type="up"/>
						</a>
					</span>
        </div>
      </Form>
    );
  }

  render() {
    const {expandForm} = this.state;

    return (
      <div className={styles.projectFilter}>
        {expandForm ? this.renderAdvancedForm() : this.renderSimpleForm()}
      </div>
    );
  }
}
